<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
  <title>香菇街-你的剁手街</title>
</head>

<body>
  <!-- 顶部导航栏区 -->
  <div class="top-nav">
    <div class="container clear-float">
      <div class="fl">
        <a class="item" href="#">首页</a>
        <!-- 先选中一个a标签，然后Ctrl+D就会选中相同的标签，多光标进行编辑 -->
      </div>
      <div class="fr">
        <a class="item" href="#">我的订单</a>
        <a class="item" href="#">收藏夹</a>
        <a class="item" href="#">登陆</a>
        <a class="item" href="#">注册</a>
      </div>
    </div>
  </div>
  <!-- 头部搜索栏区 -->
  <div class="header">
    <div class="container clear-float">
      <div class="col-2 logo">香菇街</div>
      <div class="col-5 search-bar">
        <input type="text">
        <button>搜索</button>
      </div>
      <div class="col-3 cart"><a href="#">我的购物车</a></div>
    </div>
  </div>
  <!-- 中间促销区 -->
  <div class="main-promote">
    <div class="container clear-float">
      <div class="col-2 cat">
        <div class="item">item / item</div>
        <div class="item">item / item</div>
        <div class="item">item / item</div>
        <div class="item">item / item</div>
        <div class="item">item / item</div>
        <div class="item">item / item</div>
        <div class="item">item / item</div>
        <div class="item">item / item</div>
        <div class="item">item / item</div>

      </div>
      <div class="col-6">
        <div class="slider">
          <img src="images/slider_01.png" alt="">
        </div>
        <div class="sub-promote">
          <div class="col-5"><img src="images/001.png" alt=""></div>
          <div class="col-5"><img src="images/002.png" alt=""></div>
        </div>
      </div>

      <div class="col-2 info">
        <div class="auth clear-float">
          <!-- 因为avatar是浮动的，如果不清除浮动，那么母元素会有高度塌陷的问题，公告就会上去 -->
          <div class="avatar "></div>
          你好，欢迎剁手~
        </div>
        <div class="anno">
          <div class="title">公告</div>
          <div class="content">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod fugiat odio in cumque modi? Quidem animi
            molestiae non corporis labore, perferendis nam maiores accusamus illo? Enim molestiae consectetur officia
            soluta!
            nsecteui ipsum, dolor voluptates corrupti saepe magni ullam, enim quod iure vitae rem fugit perferendis,
            facere debitis voluptate laudantium culpa et.</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 分类销售区 -->
  <div class="container">
    <div class="cat-promote  clear-float">
      <!-- 每一种分类广告包括一个标题一个 广告内容-->
      <div class="title">女装</div>
      <div class="content">
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
      </div>
    </div>
    <div class="cat-promote  clear-float">
      <!-- 每一种分类广告包括一个标题一个 广告内容-->
      <div class="title">居家用品</div>
      <div class="content">
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
      </div>
    </div>
    <div class="cat-promote  clear-float">
      <!-- 每一种分类广告包括一个标题一个 广告内容-->
      <div class="title">儿童服饰</div>
      <div class="content">
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
      </div>
    </div>
    <div class="cat-promote  clear-float">
      <!-- 每一种分类广告包括一个标题一个 广告内容-->
      <div class="title">笔记本电脑</div>
      <div class="content">
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
        <div class="col-2 item">
          <div class="card"></div>
        </div>
        <div class="col-3 item">
          <div class="card"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部页脚区 -->
  <div class="footer">
    <div class="container clear-float">
      <a href="#">askdf</a>
      <a href="#">askdf</a>
      <a href="#">askdf</a>
      <a href="#">askdf</a>
    </div>
  </div>

</body>

</html>